<template>
	<view class="i-blank"  :style="[viewStyle]">
		<view :style="bodyStyle">
			<custom-components :componentsId="option.componentsId"></custom-components>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed } from 'vue'
	import { useLayoutCompoments } from './hooks'
	import {px2rpx} from './utils'
	import customComponents from './child/custom.vue'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	

	const props = withDefaults(defineProps<{
		option : {
			// 组件id，用于定制项目下页面替换对应的装修占位
			componentsId : string
			// 底色背景
			backgroundColor : string
			// 组件背景
			bodyBackgroundColor : string
			// 空白高度
			height : number
			// 上边距
			paddingTop : number
			// 下边距
			paddingBottom : number
			// 左右边距
			paddingX : number
			// 上圆角
			radiusTop : number
			// 下圆角
			radiusBottom : number
		}
	}>(), {
		option: () => ({
			componentsId: '',
			backgroundColor: '',
			bodyBackgroundColor: '',
			height: 20,
			paddingTop: 0,
			paddingBottom: 0,
			paddingX: 0,
			radiusTop: 0,
			radiusBottom: 0
		})
	})

	const ctx = useCurrentInstance()

	const { viewStyle, bodyBoxStyle } = useLayoutCompoments(ctx, props.option)

	const bodyStyle = computed(() => [bodyBoxStyle.value,props.option.componentsId ? {} :{
				height: px2rpx(props.option.height)
			}])


</script>